<template>
  <div class="add-form">
    <el-dialog title="题目预览" :visible.sync="dialogFormVisible">
      <el-row>
        <el-col :span="6"><span>【题型】:{{list.questionType}}</span></el-col>
        <el-col :span="6"><span>【编号】:{{list.number}}</span></el-col>
        <el-col :span="6"><span>【难度】:{{list.difficulty}}</span></el-col>
        <el-col :span="6"><span>【标签】:{{list.tags}}</span></el-col>
        <el-col :span="6"><span>【学科】:{{list.subjectName}}</span></el-col>
        <el-col :span="6"><span>【目录】:{{list.directoryName}}</span></el-col>
        <el-col :span="6"><span>【方向】:{{list.direction}}</span></el-col>
      </el-row>
      <hr>
      【题干】:
      <div class="quesbody" v-html="list.question"></div>
      TODO/根据题型判断
      <hr>
      【参考答案】:
      <el-button type="danger" @click="showvideo=true">视频答案浏览</el-button>
      <video :src="list.videoURL" v-if="showvideo"></video>
      <hr>
      【答案解析】:
      <div v-html="list.question"></div>
      <hr>
      【题目备注】:{{list.remarks}}
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormH">{{$t('table.cancel')}}</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: 'QuestionsAdd',
  props: {
  },
  data () {
    return {
      dialogFormVisible: false,
      showvideo: false,
      list: {}
    }
  },
  computed: {},
  methods: {
    // 弹层显示
    dialogFormV () {
      this.dialogFormVisible = true
    },
    // 弹层隐藏
    dialogFormH () {
      this.dialogFormVisible = false
    },
    // 提供数据渲染
    setList (data) {
      this.list = data
    }
  }

}
</script>
<style>

.el-dialog__footer {
  text-align: center;
}
</style>
